* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

i {
  font-style: normal;
}

a {
  text-decoration: none;
  display: block;
}

img {
  display: block;
}

html, .container,
body {
  height: 100%;
  width: 100%;
}

.container {
  background: #f5f5f5;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

header {
  width: 100%;
  height: .85rem;
  background: #FFCC33;
  flex-shrink: 0;
}

.address {
  height: 40%;
  width: 96%;
  margin: .03rem auto;
  display: flex;
  align-items: center;
  font-weight: bold;
  line-height: .35rem;
}

.address img {
  width: .15rem;
  height: .15rem;
}

.address img:nth-child(1) {
  width: .2rem;
  height: .2rem;
  margin-left: .05rem;
}

.address span {
  font-size: .14rem;
}

.hidden {
  display: none;
}

.search {
  height: 44%;
  width: 94%;
  background: white;
  border-radius: .2rem;
  display: flex;
  margin: .05rem .1rem;
  justify-content: space-between;
}

.search div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: .01rem;
}

.search div img {
  margin-left: .1rem;
  width: .16rem;
  height: .16rem;
}

.search div input {
  font-size: .13rem;
  margin-left: .1rem;
  border-style: none;
  outline: 0;
  height: 90%;
}

.search i {
  width: .7rem;
  height: 82%;
  background-color: #FFCC33;
  border-radius: .2rem;
  text-align: center;
  line-height: .3rem;
  margin-top: .035rem;
  margin-right: .05rem;
  font-size: .14rem;
}

main {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

main .scroll-box {
  width: 100%;
}

main .pulldown {
  height: .5rem;
  background: white;
  width: 100%;
  color: grey;
  line-height: .5rem;
  text-align: center;
  position: absolute;
  top: -.5rem;
}

main .pullup {
  height: .5rem;
  background: white;
  width: 100%;
  color: grey;
  line-height: .5rem;
  text-align: center;
  position: absolute;
}

nav {
  width: 100%;
  height: 1.5rem;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  margin: .1rem 0;
}

nav div {
  width: .71rem;
  height: .72rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav div img {
  width: .44rem;
  height: .44rem;
}

nav div span {
  width: 100%;
  height: .17rem;
  text-align: center;
  line-height: .17rem;
  font-size: .12rem;
  font-weight: lighter;
}

.srcollImg {
  height: .9rem;
  width: 92%;
  margin: 0 .14rem;
  overflow: hidden;
  border-radius: .12rem;
}

.srcollImg .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.srcollImg .swiper-wrapper img {
  height: 100%;
  width: 100%;
  display: block;
}

.tags {
  width: 100%;
  height: .38rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}

.tags div {
  width: .7rem;
  height: .25rem;
  background: white;
  border-radius: 5px;
  text-align: center;
  line-height: .25rem;
  font-size: .12rem;
  color: #4f4f4f;
}

.tags div:nth-child(5) {
  background: transparent;
  width: .24rem;
  height: .28rem;
}

.tags div:nth-child(5) img {
  margin-top: .03rem;
  width: 100%;
}

.goods {
  width: 100%;
}

.goods a {
  color: black;
  margin: .1rem auto;
  width: 96%;
  height: 1.1165rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .1rem;
}

.goods a:nth-child(1) {
  margin-top: .02rem;
}

.goods a img {
  margin-right: .1rem;
  width: 0.9745rem;
  height: 0.9745rem;
  border-radius: .1rem;
}

.info li {
  font-size: .14rem;
  width: 2.223rem;
}

.info li:nth-child(1) {
  height: .2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.info li:nth-child(1) img {
  width: .2944rem;
  height: .16rem;
}

.info li:nth-child(1) span {
  font-size: .16rem;
  height: .2rem;
  overflow: hidden;
  margin-right: .2rem;
}

.info li:nth-child(2) {
  width: 100%;
  height: .1401rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: .05rem;
}

.info li:nth-child(2) span {
  font-size: .13rem;
  color: #a3a2a2;
}

.info li:nth-child(2) p {
  margin-left: .02rem;
  margin-right: .1rem;
  color: #ff8000;
  font-size: .11rem;
}

.info li:nth-child(3) span {
  font-size: .11rem;
  color: #a3a2a2;
}

.info li:nth-child(3) span:nth-child(3) {
  margin-left: .35rem;
}

.info li:nth-child(4) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  height: .2rem;
  width: 2rem;
  overflow: hidden;
}

.info li:nth-child(4) img {
  width: .2rem;
  height: .2rem;
  margin-right: .02rem;
  background: #9b7638;
}

.info li:nth-child(4) span {
  line-height: .2rem;
  font-size: .12rem;
  color: #9b7638;
  height: 100%;
  background: #fbf6e8;
  padding: 0 .05rem;
  border-radius: .05rem;
}

.info li:nth-child(5) {
  font-size: .1rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0.06rem 0;
}

.info li:nth-child(5) p {
  border-radius: .03rem;
  height: 100%;
  border: .005rem solid red;
  color: red;
  margin: 0 .02rem;
}

footer {
  flex-shrink: 0;
  width: 100%;
  height: .5rem;
  display: flex;
  justify-content: space-between;
  background: #FAFAFA;
}

footer a {
  width: 33.33%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer a img {
  margin-top: .03rem;
  width: .27rem;
}

footer a span {
  font-size: .12rem;
  color: #323232;
  font-weight: lighter;
}
